<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <link rel="icon" href="https://pic.imgdb.cn/item/64180526a682492fcc9dda64.png" />
  <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/" />

  <title>检索结果</title>
  <link href="https://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
  <link href="https://v3.bootcss.com/examples/dashboard/dashboard.css" rel="stylesheet" />
  <script src="https://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
  <script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" style="
    background: #44dcf0 !important;">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="{{ url_for('index') }}">T の Final Assignment</a>
      </div>
      <!-- <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="{{ url_for('index') }}" style="color: black">首页</a>
        </li>
      </ul>
    </div> -->
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li>
            <a href="{{ url_for('result') }}">源数据展示</a>
          </li>
          <li>
            <a href="{{ url_for('salary') }}">薪资对比</a>
          </li>
          <li class="active">
            <a href="{{ url_for('skill') }}">岗位技术\类型</a>
          </li>
          <li>
            <a href="{{ url_for('area') }}">地区分布</a>
          </li>
          <li>
            <a href="{{ url_for('jobName') }}">岗位职称</a>
          </li>
          <li>
            <a href="{{ url_for('trades') }}">不同行业薪资</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <!-- 这里放置主要内容 -->
        <div id="bar" style="width: 800px; height: 600px;"></div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
    crossorigin="anonymous"></script>
  <script>
    window.jQuery ||
      document.write(
        '<script src="../../assets/js/vendor/jquery.min.js"><\/script>'
      );
  </script>
  <script src="https://v3.bootcss.com/dist/js/bootstrap.min.js"></script>
  <script src="https://v3.bootcss.com/assets/js/vendor/holder.min.js"></script>
  <script src="https://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
  <script>
    $(function () {
      var chart = echarts.init(document.getElementById("bar"), "white", {
        renderer: "canvas",
      });
      $.ajax({
        type: "GET",
        url: "http://127.0.0.1:5000/skillData",
        dataType: "json",
        success: function (result) {
          chart.setOption(result);
        },
      });
    });
  </script>
</body>
<style>
  	.navbar-brand {
		color: white !important;
		font-size: 28px !important;
		font-weight: 300 !important;
		margin-left: 30px !important;
		margin-top: 8px !important;
	}
</style>

</html>